<script setup lang="ts">
import {computed, inject, ref, watch,nextTick} from "vue";
import {Message} from "@arco-design/web-vue";
import workOrderLog from '@/api/logistics/workOrderLog'
import { getDictData } from '@/utils/crud/dict'
const size = ref('small');
const crudRef = inject('crudRef')
const record = inject('record')
const refreshRecode = inject('refreshRecode')
const declaration = ref()
const data = ref([])

watch(()=>record.value, async (value) => {
  if(value.id == undefined){
    return;
  }
  await initList()
})

const getTime = () =>{
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份补零
  const date = String(now.getDate()).padStart(2, '0'); // 日期补零
  const hours = String(now.getHours()).padStart(2, '0'); // 小时补零
  const minutes = String(now.getMinutes()).padStart(2, '0'); // 分钟补零
  const seconds = String(now.getSeconds()).padStart(2, '0'); // 秒补零
  return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`;
}

const initList = async () =>{
  const res = await workOrderLog.getAllList({work_id:record.value.id})
  data.value = res.data
  await scrollToBottom()
}

const sendWord = async () =>{
  if(!declaration.value){
      return
  }
  await workOrderLog.save({
    work_id:record.value.id,
    remark:declaration.value,
  })
  data.value.push({
      name: '我',
      self:true,
      created_at: getTime(),
      remark: declaration.value,
    })
    declaration.value = ''
    await scrollToBottom()
    crudRef.value.refresh()
}

const scrollToBottom = async ()=>{
  await nextTick();
  var myDiv = document.getElementsByClassName('arco-collapse-item-content')[1];
  myDiv.scrollTop = myDiv.scrollHeight + 50;
}

</script>
<template>
  <a-grid-item :span="{xs: 1, sm: 3}">
    <a-collapse :default-active-key="['1']" class="g-collapse" id="work-order-info-list">
      <a-collapse-item header="记录" key="1">
          <a-list>
            <a-list-item title="title" description="description" v-for="item in data" :class="item.self ? 'right':''">
              <a-list-item-meta>
              <template #title>
                <a-typography-text>{{item.created_at}}</a-typography-text>
                <p>{{item.name}}</p>
              </template>
              <template #description>
                <a-typography-text>{{item.remark}}</a-typography-text>
              </template>
            </a-list-item-meta>
            </a-list-item>
          </a-list>
      </a-collapse-item>
        <a-form-item  v-if="record?.status != 3" field="declaration">
          <a-textarea v-model="declaration" placeholder="请输入回复" :auto-size="{ minRows: 2, maxRows: 2 }" />
          <a-button  type="primary" @click="sendWord()">发送</a-button>
        </a-form-item>
    </a-collapse>
  </a-grid-item>
</template>

<style>
#work-order-info-list .arco-collapse-item-content{
  overflow-y:scroll;
  height:400px !important;
}
#work-order-info-list .arco-list-item{
  border:none !important;
}
#work-order-info-list .arco-list-item.right{
  text-align: right;
}
#work-order-info-list .arco-list-item.right .arco-list-item-meta{
  display:inline-block;
  float:right;
}
#work-order-info-list .arco-col-19{
  flex: 0 0 100% !important;
  width: 100% !important;
}
</style>